<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport"
          content="width=device-width,height=device-height, initial-scale=1,maximum-scale=1,user-scalable=0">
    <title>我的预约</title>
    <link rel="manifest" href="../manifest.json">
    <link rel="stylesheet" href="../../tool/jquery-mobile/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../tool/jquery/jquery-1.11.2.min.js"></script>
    <script src="../tool/jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/http.js"></script>
    <style>
        * {
            font-family: '微软雅黑';
            text-shadow: none;
        }

        .content {
            width: 100%;
            background: #eeeeee;
            padding: 1px
        }

        .job_child {
            padding-top: 1px;
            position: relative;
            /*height:170px;*/
            width: 100%;
            border-bottom: 1px solid #dddddd;
            background: #ffffff;
        }

        .job_name {
            margin-left: 20px;
            display: inline-block;
            width: 50%;
            font-size: 18px;
            margin-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .book_btn {
            background: url('../image/right.png') no-repeat;
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 0px;
            z-index: 199;
            position: absolute;
            right: 10px;
            top: 12px;
            cursor: pointer;
        }

        .date_div {

            display: inline-block;
            /*background:#ffffff;*/
            height: 25px;
            margin-left: 2%;
            border-radius: 5px;
            padding-top: 1px;
            font-size: 18px;
            /*position:relative;*/
        }

        .customer_div {
            padding-top: 5px;
            display: inline-block;
            width: 70%;
            border-radius: 5px;
            height: 27px;
            margin-left: 6%;
            font-size: 16px;
            color: rgb(136, 136, 136);;
        }

        .address1_div {
            width: 95%;
            padding-top: 1px;
            border-radius: 5px;
            line-height: 24px;
            margin-left: 6%;
            font-size: 16px;
            color: rgb(136, 136, 136);
        }

        .date_span {
            margin-left: 10px;
            display: inline-block;
            margin-top: 5px;
        }

        .added_span {
            float: right;
            color: red;
            display: inline-block;
            margin-top: 5px;
            margin-right: 15px;
            font-size: 18px;
        }

        .play_time {
            width: 100%;
            position: relative;
            margin-bottom: 7px;
        }

        .sal_span {
            /*display: inline-block;;
            width:60%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;*/
        }

        .fix_table {
            position: fixed;
            bottom: 0px;
            z-index: 200;
            width: 100%;
            height: 45px;
            font-size: 18px;
            border-collapse: collapse;
            background: #ffffff
        }

        .fix_book_td {
            color: #00a2df;
            background: #ffffff;
            text-align: center;
            font-size: 16px;
        }

        .fix_book_td_active {
            color: #ffffff;
            background: #ee721a;
            text-align: center;
            font-size: 16px;
        }

        .kuochong {
            height: 9px;
        }

        .sel_city {
            position: relative;
            text-align: center;
            font-size: 18px;
            height: 50px;
            padding-top: 10px;
            background: #ee721a;
            color: #ffffff;
        }

        .sel_city_span {
            position: absolute;
            left: 20px;
        }

        .page {
            margin-bottom: 35px;
        }

        .customer_span {
            display: inline-block;
            width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .address1_span {
            display: inline-block;
            width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .div_tab {
            height: 40px;
            width: 100%;
            margin-top: 50px;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
        }

        .div_tab div{
            float: left;
            width: 50%;
        }

        .div_tab-active{
            background-color: #c1e23c;
        }
    </style>
</head>
<body>

<div style="position:fixed;left:0;top:0;width:100%;z-index:200;">
    <div class="sel_city">
        <span class="sel_city_span"></span>
        <span>我的反馈</span>
    </div>
</div>
<div class="div_tab">
    <div id="active1" onclick="switchTab(1)" class="div_tab-active">预约列表</div>
    <div id="active2" onclick="switchTab(2)">面试结果</div>
</div>
<div class="content"></div>
<div class="text-center page"></div>
<table class="fix_table">
    <tbody>
    <tr style="border-top:1px solid #dddddd">
        <td class="fix_book_td" id="fairs">
            <div>岗位列表</div>
        </td>
        <td class="fix_book_td_active" id="apped">
            <div>我的反馈</div>
        </td>
        <td class="fix_book_td" id="resume">
            <div>我的简历</div>
        </td>
    </tr>
    </tbody>
</table>
</body>
<script type="text/javascript">
    var active = 1;


    var renderSubscribeList = function (data) {
        $(".content").children().remove();
        $.each(data, function () {
            var jobSubscribe = this;
            var status = jobSubscribe.status || '预约成功';
            var div_play_time = $("<div></div>").addClass("play_time");
            div_play_time.append(
                $("<div></div>").addClass("date_div").append($("<span></span>").addClass("date_span").text(jobSubscribe.subscribeAt)));
            div_play_time.append(
                $("<span></span>").addClass("added_span").text(status));

            div_play_time.appendTo($(".content"));

            var jobName = jobSubscribe.jobName || "岗位名称";
            var salaryScope = jobSubscribe.salaryScope || "薪资面议";
            var companyName = jobSubscribe.companyName || "招聘单位";
            var interviewPlace = jobSubscribe.interviewPlace || "地址不详";
            var interviewAt = jobSubscribe.interviewAt;


            var div_jod_child = $("<div></div>").addClass("job_child");
            div_jod_child.append($("<div></div>").append($("<span></span>").addClass("job_name").text(jobName)));
            var customer_span = $("<span></span>").addClass("customer_span").text("招聘企业: " + companyName);
            var sal_span = $("<span></span>").addClass("sal_span").text("岗位薪资: " + salaryScope);
            var address_span = $("<span></span>").addClass("address1_span").text("面试地址: " + interviewPlace);
            var fairTime_span = $("<span></span>").addClass("address1_span").text("面试时间: " + interviewAt);

            div_jod_child.append($("<div></div>").addClass("customer_div").append(customer_span));
            div_jod_child.append($("<div></div>").addClass("address1_div").append(sal_span));
            div_jod_child.append($("<div></div>").addClass("address1_div").append(fairTime_span));
            div_jod_child.append($("<div></div>").addClass("address1_div").append(address_span));
            div_jod_child.append($("<div></div>").addClass("kuochong"));

            div_jod_child.append($("<div></div>").addClass("book_btn").addClass("book_btn_all").attr("name", this.jobId).click(function () {
                //  goProject($(this).attr("name"));
            }));
           /* div_jod_child.click(function () {
                goProject($(".book_btn", $(this)).attr("name"));
            });*/
            div_jod_child.appendTo($(".content"));

        });
    };

    var renderInterviewResultList = function (data) {
        $(".content").children().remove();
        $.each(data, function () {
            var div_play_time = $("<div></div>").addClass("play_time");
            div_play_time.append(
                $("<div></div>").addClass("date_div").append($("<span></span>").addClass("date_span").text(this.interviewAt)));
            div_play_time.append(
                $("<span></span>").addClass("added_span").text( this.result));

            div_play_time.appendTo($(".content"));

            var positionName = this.positionName || "岗位名称";
            var companyName = this.companyName || "招聘单位";
            var interviewAt = this.interviewAt;


            var div_jod_child = $("<div></div>").addClass("job_child");
            div_jod_child.append($("<div></div>").append($("<span></span>").addClass("job_name").text(positionName)));
            var customer_span = $("<span></span>").addClass("customer_span").text("招聘企业: " + companyName);
            var fairTime_span = $("<span></span>").addClass("address1_span").text("面试时间: " + interviewAt);

            div_jod_child.append($("<div></div>").addClass("customer_div").append(customer_span));
            div_jod_child.append($("<div></div>").addClass("address1_div").append(fairTime_span));
            div_jod_child.append($("<div></div>").addClass("kuochong"));

            div_jod_child.appendTo($(".content"));

        });
    };

    var goProject = function (id) {
        window.location.href = common.ctx + "/html/jobDetail.html?id=" + id;
    };

    var loadData = function () {
        if(active === 1) {
            http.get({
                url: common.sctx + '/personal/subscribe/job/list.do',
                success: function (data) {
                    $(".book_num").text(data.length);
                    renderSubscribeList(data);
                }
            });

        } else {
            http.get({
                url: common.sctx + '/personal/interview/result/list.do',
                success: function (data) {
                    $(".book_num").text(data.length);
                    renderInterviewResultList(data);
                }
            });
        }
    };

    loadData();
    function switchTab(tab) {
        active = tab;
        if(tab === 1) {
            $("#active1").addClass("div_tab-active");
            $("#active2").removeClass("div_tab-active");
        } else {
            $("#active2").addClass("div_tab-active");
            $("#active1").removeClass("div_tab-active");
        }
        loadData();
    }
    $(document).ready(function () {

        common.userSession();

        $("#fairs").click(function () {
            window.location.href = common.ctx + "/html/fairList.html";
        });

        $("#resume").click(function () {
            window.location.href = common.ctx + "/html/resume.html";
        });

        $("#apped").click(function () {
            return false;
        });

        $("#result").click(function () {
            window.location.href = common.ctx + "/html/result.html";
        });
        $("#sign").click(function () {
            window.location.href = common.ctx + "/html/sign.html";
        });
    });
</script>

</html>